<template>
    <div class="station-container">
        <!-- 保持原有导航栏 -->
        <van-nav-bar title="我的桩站" left-text="返回" left-arrow @click-left="onClickLeft" />

        <!-- 添加充电站卡片 -->
        <div class="station-card" v-for="item of stations" :key="item.id">
            <div class="station-header">
                <div class="station-title">{{ item.stationName }}</div>
                <div class="station-price">
                    <span class="current-price">{{ item.price }}元/度</span>
                    <span class="original-price">{{item.originalPrice}}元/度</span>
                </div>
            </div>

            <div class="station-info">
                <div class="time-info">
                    <van-icon name="clock-o" />
                    <span>{{item.businessStartTime}}-{{ item.businessEndTime }} 小时 | {{item.dedicatedTypeName}}专用</span>
                </div>

                <div class="capacity-info">
                    <van-icon name="charging" />
                    <span>容量共: {{ item.stationGunList.length }}</span>
                </div>

                <div class="location-info">
                    <van-icon name="location-o" />
                    <span>{{ item.address }}</span>
                </div>

                <!-- 新增充电枪信息区域 -->
                <div class="gun-info">
                    <div class="gun-header" @click="item.showGuns = !item.showGuns">
                        <van-icon name="guide-o" />
                        <span>充电枪信息</span>
                        <van-icon :name="item.showGuns ? 'arrow-up' : 'arrow-down'" />
                    </div>
                    
                    <div class="gun-list" v-show="item.showGuns">
                        <div class="gun-item" v-for="(gun, index) in item.stationGunList || []" :key="index">
                            <span class="gun-name">{{gun.gunName || `充电枪${index + 1}`}}</span>
                            <span class="gun-status" :class="gun.stationStatusName === '空闲中' ? 'free' : 'busy'">
                                {{gun.stationStatusName}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { myCoreListJs } from '@/api/core';
import { ElMessage } from 'element-plus';
const onClickLeft = () => history.back();

// 经纬度
const stations = ref([]);
//查询参数
const query = ref({
    pageNum: 1,
    pageSize: 5,
    total: 0
})
function getCoreAll() {
    myCoreListJs(query.value).then(res => {
        if (res.data.code == 200000) {
            console.log(res.data.data);

            stations.value = res.data.data.records
            query.value.total = res.data.data.total
        } else {
            ElMessage.error(res.data.errorMessage)
        }
    })
}
getCoreAll();


</script>

<style scoped>
.station-container {
    min-height: 100vh;
    background-color: #f7f8fa;
    padding: 16px;
}

.station-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.station-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.station-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.station-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.current-price {
    color: #ff6034;
    font-size: 18px;
    font-weight: bold;
}

.original-price {
    color: #999;
    font-size: 14px;
    text-decoration: line-through;
}

.station-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.time-info,
.capacity-info,
.location-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.location-info {
    justify-content: space-between;
}

.distance {
    color: #4080ff;
    font-weight: 500;
}

.van-icon {
    color: #4080ff;
}

.gun-info {
    border-top: 1px solid #eee;
    padding-top: 12px;
    margin-top: 8px;
}

.gun-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    cursor: pointer;
}

.gun-list {
    margin-top: 8px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
}

.gun-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.gun-item:last-child {
    border-bottom: none;
}

.gun-name {
    color: #333;
    font-size: 14px;
}

.gun-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.gun-status.free {
    background: #e8f5e9;
    color: #4caf50;
}

.gun-status.busy {
    background: #ffebee;
    color: #f44336;
}
</style>